
<%= stylesheet_link_tag "bootstrap/bootstrap.min" %>
<%= javascript_include_tag "highcharts", "highcharts-more"%>


<div>
	<ul class="nav nav-tabs">
	  <li id="li1" role="presentation" class="active"><%= link_to '热门开源软件薪资与工作经验关系图', :controller => 'ossean_highcharts', :action => 'index', :whichChart => 1%></li>
	  <li id="li2" role="presentation"><%= link_to '热门地区热门软件薪资情况图', :controller => 'ossean_highcharts', :action => 'index', :whichChart => 2%></li>
	  <li id="li3" role="presentation"><%= link_to '热门开源软件职位需求数量图', :controller => 'ossean_highcharts', :action => 'index', :whichChart => 3%></li>
	  <li id="li4" role="presentation"><%= link_to '按城市查询关联态势分析图', :controller => 'ossean_highcharts', :action => 'index', :whichChart => 4%></li>
	</ul>
</div>
<div>
<% if @whichChart == '1' || @whichChart == nil %>
	<% for i in (0..@chart1_open_source_project.length-1) %>
	<div id="container1_<%=i%>">
		
	</div>
	<hr />
	<% end %>
<% elsif @whichChart == '2' %>
	<% for i in (0..@chart2_city.length-1) %>
	<div id="container2_<%=i%>">
		
	</div>
	<hr />
	<% end %>
<% elsif @whichChart == '3' %>
	<div id="container3">
		
	</div>
<% elsif @whichChart == '4' %>
	<select id="select_city">
		<option value=''>选择查询城市</option>
		<% @chart4_city.each do |h| %>
		<option value='<%= h.city %>'><%= raw(h.city) %></option>
		<% end %>
	</select>
	<div id="container4_1">
		
	</div>
	<div id="container4_2">
		
	</div>
	<div id="container4_3">
		
	</div>
<% else %>
	<div>
		<h1>图不存在 正在开发</h1>
	</div>
<% end %>
</div>


<% if @whichChart == '1' || @whichChart == nil %>
<% for i in (0..@chart1_open_source_project.length-1) %>
<script type="text/javascript">
	$(function () {
			$("#li1").attr("class","active");
			$("#li2").attr("class",false);
			$("#li3").attr("class",false);
			$("#li4").attr("class",false);
			var i = <%= i %>
			var tmp = "#container1_"+i;
			$(tmp).highcharts({
		        chart: {
		            type: 'column'
		        },
		        title: {
		            text: null	//'开源软件工资与工作经验关系图'
		        },
		        subtitle: {
		            text: '开源软件:<%= @chart1_open_source_project[i].name %>'
		        },
		        credits:{
	     			enabled:false // 禁用版权信息
				},
		        xAxis: {
		        	title: {
		        		text: '工作经验'
		        	},
		            categories: <%= raw(@chart1_experience[i]) %>
		        },
		        yAxis: {
		            min: 0,
		            title: {
		                text: '薪资(K)'
		            }
		        },
		        tooltip: {
		            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		                '<td style="padding:0"><b>{point.y:.3f} k</b></td></tr>',
		            footerFormat: '</table>',
		            shared: true,
		            useHTML: true
		        },
		        plotOptions: {
		            column: {
		                pointPadding: 0.01,
		                borderWidth: 0
		            }
		        },
		        series: [{
		            name: '最小收入均值',
		            data: <%= @chart1_avg_min_salary[i].to_s %>
		
		        }, {
		            name: '最大收入均值',
		            data: <%= @chart1_avg_max_salary[i].to_s %>
		
		        }]
    		});
	});				
</script>
<% end %>

<% elsif @whichChart == '2' %>
<% for i in (0..@chart2_city.length-1) %>
<script type="text/javascript">
	$(function () {
			$("#li1").attr("class",false);
			$("#li2").attr("class","active");
			$("#li3").attr("class",false);
			$("#li4").attr("class",false);
			var i = <%= i %>
			var tmp = "#container2_"+i;
			$(tmp).highcharts({
		        chart: {
		            type: 'column'
		        },
		        title: {
		            text: null	//'不同地区开源软件平均最高最低工资组图'
		        },
		        subtitle: {
		            text: '地区:<%= raw(@chart2_city[i]) %>'
		        },
		        credits:{
	     			enabled:false // 禁用版权信息
				},
		        xAxis: {
		        	title: {
		        		text: '开源软件'
		        	},
		            categories: <%= raw(@chart2_open_source_project_name[i]) %>
		        },
		        yAxis: {
		            min: 0,
		            title: {
		                text: '薪资(K)'
		            }
		        },
		        tooltip: {
		            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		                '<td style="padding:0"><b>{point.y:.3f} k</b></td></tr>',
		            footerFormat: '</table>',
		            shared: true,
		            useHTML: true
		        },
		        plotOptions: {
		            column: {
		                pointPadding: 0.01,
		                borderWidth: 0
		            }
		        },
		        series: [{
		            name: '最小收入均值',
		            data: <%= @chart2_avg_min_salary[i].to_s %>
		
		        }, {
		            name: '最大收入均值',
		            data: <%= @chart2_avg_max_salary[i].to_s %>
		
		        }]
    		});
	});				
</script>
<% end %>


<% elsif @whichChart == '3' %>
<script type="text/javascript">
	$(function () {
			$("#li1").attr("class",false);
			$("#li2").attr("class",false);
			$("#li3").attr("class","active");
			$("#li4").attr("class",false);
    $('#container3').highcharts({
        title: {
            text: null,	//'开源软件职位需求数量图'
            x: -20 //center
        },
        // subtitle: {
            // text: 'Source: WorldClimate.com',
            // x: -20
        // },
        credits: {
        	enabled: false
        },
        xAxis: {
        	title: {
        		text: '开源软件'
        	},
            categories: <%= raw(@chart3_open_source_project_name) %>
        },
        yAxis: {
            title: {
                text: '职位需求数量(个)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '个'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
        	name: '职位需求量',
            data: <%= @chart3_require %>
        }]
    });
});
				
</script>
<% elsif @whichChart == '4' %>
<script type="text/javascript">
	$(document).ready(function(){
		$("#li1").attr("class",false);
		$("#li2").attr("class",false);
		$("#li3").attr("class",false);
		$("#li4").attr("class","active");
		$('#select_city').change(function(){
			var value = $('#select_city option:selected').val();
			$.ajax({
				type: "post",
				contentType: "application/json; charset=utf-8",
				url: '/salarychart/ajax?chart=' + 4 + "&city=" + value,
				dataType: "json",
				success: show,
				error: function errorCallback(XMLHttpRequest, textStatus, errorThrown) {
					alert(errorThrown +":"+ textStatus);
				}
			});
		});
	});
	
	function show(result){
		var city = result.city;
		var data = result.data;
		var data2 = result.data2;
		var experience = result.experience;
		var range3 = result.range3;
		if(data == null || data2 == null)
			$('#container4_1').html("没有任何数据");
		else{
			$('#container4_1').highcharts({
	        chart: {
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            plotShadow: false
	        },
	        title: {
	            text: city + "地区开源软件职位需求对比分析图"
	        },
	       	credits: {
	       		enabled: false
	       	},
	       	tooltip: {
	        	pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
	       	},
	      	plotOptions: {
	           	pie: {
	               	allowPointSelect: true,
	               	cursor: 'pointer',
	               	dataLabels: {
	                   	enabled: true,
	                   	color: '#000000',
	                   	connectorColor: '#000000',
	                   	format: '<b>{point.name}</b>: {point.percentage:.2f} %'
	               	}
	           	}
	       	},
	       series: [{
	           type: 'pie',
	           name: '职位需求比例',
	           data: data
	       }]
		});
		
		//画第二张图 该城市工作经验对比图
		$('#container4_2').highcharts({
	        chart: {
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            plotShadow: false
	        },
	        title: {
	            text: city + "地区工作经验需求对比分析图"
	        },
	       	credits: {
	       		enabled: false
	       	},
	       	tooltip: {
	        	pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
	       	},
	      	plotOptions: {
	           	pie: {
	               	allowPointSelect: true,
	               	cursor: 'pointer',
	               	dataLabels: {
	                   	enabled: true,
	                   	color: '#000000',
	                   	connectorColor: '#000000',
	                   	format: '<b>{point.name}</b>: {point.percentage:.2f} %'
	               	}
	           	}
	       	},
	       series: [{
	           type: 'pie',
	           name: '工作经验比例',
	           data: data2
	       }]
		});
		
		//画第三张图 该地区薪资情况与工作经验的关系
		$('#container4_3').highcharts({
	      chart: {
	          type: 'columnrange',
	          inverted: true
	      },
	      title: {
	          text: city + "地区薪资与工作经验对比分析图"
	      },
	      credits: {
	      		enabled: false
	      },
	      tooltip: {
	       valueSuffix: 'k'
	      },
	      legend: {
	      	enabled: false
	      },
	      plotOptions: {
	          columnrange: {
	          	dataLabels: {
	          		enabled: true,
	          		formatter: function(){
	          			return this.y + "k";
	          		}
	          	}
	          }
	      },
	      xAxis: {
	      	categories: experience
	      },
	      yAxis: {
	      	title: {
	      		text: '薪资(k)'
	      	}
	      },
	      series: [{
	          name: '薪资',
	          data: range3
	      }]
		});
		
	}//else 结尾
}
</script>
<% end %>
